<template>
	
	<picker 
	mode="multiSelector" 
	:range="list" 
	@change="change"
	@columnchange="columnchange"
	range-key="name"
	class="picker"
	>
		
		<slot></slot>
	</picker>
	
	
</template>

<script setup>
import { reactive, ref } from 'vue';
	
	
	
	const emit = defineEmits(['confirm'])
	
	let title = ref('请选择')
	
	
	let list = ref([[],[],[]])
	
	
	const change = (e)=>{
		let data = {
			province:list.value[0][e.detail.value[0]],
			city:list.value[1][e.detail.value[1]],
			area:list.value[2][e.detail.value[2]]
		}
		let str = ''
		for(let k in data){
			str+= data[k].name
		}
		
		title.value = str
		
		emit('confirm',data)
	}
	
	
	const columnchange = (e)=>{
		if(e.detail.column<2){
			getData(list.value[e.detail.column][e.detail.value].id,e.detail.column+1)
		}
	}
	
	
	const getData = (pid,colum)=>{
		uni.$axios({
			method:'get',
			url:'/api/wstore.address/area',
			data:{
				pid
			},
			success(res){
				list.value[colum] = res.data
				if(colum<2){
					getData(res.data[0].id,++colum)
				}
			}
		})
	}
	getData(0,0)
	
	
	
	defineProps({
		color:{
			type:String,
			default:'#333'
		},
		fontSize:{
			type:String,
			default:'28rpx'
		},
		width:{
			type:String,
			default:'auto'
		}
	})
	
	
</script>

<style scoped lang="scss">

</style>